<template>
	<view>
		<view class="writebox" v-for="(item, index) in list" :key="index" v-if="index == current">
			<!-- <view class="writetext f30 fb" v-if="type == 3">
				emperor.皇帝
			</view> -->
			<view class="answer">
				<view v-if="item.answer_show == 1">{{ item.word }}</view>
			</view>
			<view class="writetext f30 fb">
				{{ item.chinese }}
			</view>
			<!-- 拼写界面 -->
			<view class="">
				<view class="mt20">
					<u-icon name="volume" color="#999999" size="30" @tap="getVoice(item.word)"></u-icon>
				</view>
				<!-- 输入框 -->
				<view class="writebox_inp" v-if="type == 1" :style="{width: (item.word_length*40+20) + 'rpx'}">
					<input type="text" v-model="currentInput" :focus="false" style="font-size: 56rpx;font-weight: bold;" @tap="wordSpell(index)">
				</view>
				<view class="" v-else>
					<view class="writebox_inp_check d-c-c" v-if="type == 3">
						<u-icon name="checkmark" color="#ffffff" size="90"></u-icon>
					</view>
					<view class="writebox_inp_close d-c-c" v-else>
						<u-icon name="close" color="#ffffff" size="90"></u-icon>
					</view>
					
				</view>
				<!-- 翻页 -->
				<view class="d-c-c" style="margin-top: 130rpx;">
					<!-- <view class="d-c-c mr20 berboxz" @click="prev">
						<u-icon name="arrow-left" color="#999999" size="28"></u-icon>
					</view> -->
					<view class="f30 fb gray3">
						{{ current+1 }}  /  {{ total }}
					</view>
					<!-- <view class="d-c-c ml20 berboxz" @click="next">
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view> -->
				</view>
				<!--  -->
				<view class="d-b-c writebox_czuo">
					<view class="writebox_czuo_item" @tap="addWordsNote(item.id)">加入生词本</view>
					<view class="d-c-c">
						<view class="writebox_czuo_item mr20" @tap="next">下一词</view>
						<view class="writebox_czuo_item" @tap="lookAnswer(index)">查看答案</view>
					</view>
				</view>
			</view>
			<!-- 对错 -->
		</view>
		
		<u-popup v-model="keyboardShow" mode="bottom" :mask="false" :custom-style="popupCustomStyle">
			<xm-keyboard-box-letter 
				:vibration="true"
				:showChangeBtn="true"
				:showCancelBtn="true"
				@add="letterAdd"
				@del="letterDel"
				@confirm="spellConfirm"
				@cancel="spellCancel"
				@clear="letterClear"
			></xm-keyboard-box-letter>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				ids: '',
				list: [],
				currentInput: '',
				currentInputArray: [],
				current: 0, //现数
				total: 0, //总数
				type: 1, // 1 拼写中  2拼写错误 3拼写正确
				rightVoiceSrc: '/static/audio/spell_right.mp3',
				wrongVoiceSrc: '/static/audio/spell_wrong.mp3',
				keyboardShow: false,
				// #ifdef APP || MP-WEIXIN
				popupCustomStyle: {},
				// #endif
				// #ifdef H5
				popupCustomStyle: {'width': '430px','margin': '0 auto'},
				// #endif
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				if (option.ids) {
					this.ids = option.ids
					this.getList()
				} else {
					uni.navigateBack()
				}
			}
		},
		onShow() {
			setTimeout(() => {
				uni.hideKeyboard()
			}, 50)
		},
		methods: {
			getList() {
				this.$u.post(this.$u.api.wordsByIds, {
					ids: this.ids
				}).then((res) => {
					this.list = res.data
					this.total = res.data.length
				}).catch((err) => {
					console.log(err)
				})
			},
			// 获取单词音频
			getVoice(word) {
				this.$u.post(this.$u.api.wordVoice, {
					word: word,
					type: this.$store.state.voiceType
				}).then((res) => {
					// 播放音频
					this.utils.playAudio(this.imgUrl + res.data)
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			// 开始拼写
			wordSpell(i) {
				uni.hideKeyboard()
				this.keyboardShow = true
			},
			// 输入字母
			letterAdd(e) {
				this.currentInputArray.push(e)
				this.currentInput = this.currentInputArray.join('')
			},
			// 删除字母
			letterDel() {
				let num = this.currentInputArray.length - 1
				this.currentInputArray.splice(num, 1)
				this.currentInput = this.currentInputArray.join('')
			},
			// 拼写确认
			spellConfirm() {
				if (this.currentInput == '') {
					uni.$u.toast('请先拼写')
					return false
				}
				let item = this.list[this.current]
				if (this.currentInput == item.word) {
					this.utils.playAudio(this.rightVoiceSrc)
					this.type = 3
					setTimeout(() => {
						this.next()
					}, 1000)
				} else {
					this.utils.playAudio(this.wrongVoiceSrc)
					this.type = 2
				}
				this.keyboardShow = false
			},
			// 拼写取消
			spellCancel() {
				this.keyboardShow = false
			},
			// 拼写清除
			letterClear() {
				this.currentInput = ''
				this.currentInputArray = []
			},
			// 加入生词本
			addWordsNote(id) {
				this.$u.post(this.$u.api.addWordsNote, {
					course_words_id: id
				}).then((res) => {
					uni.$u.toast('添加成功')
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			// 查看答案
			lookAnswer(i) {
				this.list[i].answer_show = 1
			},
			// 上一个
			prev() {
				if (this.current >1) {
					this.current--
				}
			},
			// 下一个
			next() {
				if (this.current + 1 < this.total) {
					this.current++
					this.currentInput = ''
					this.currentInputArray = []
					this.type = 1
				} else {
					uni.$u.toast('单词拼写结束')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/indexhome/review'
						})
					}, 1500)
				}
			},
		}
	}
</script>

<style lang="less">
	.writebox {
		text-align: center;
		padding: 8vh 30rpx 30rpx;
		position: relative;
		
		.answer {
			width: 100%;
			height: 140rpx;
			font-size: 56rpx;
			color: #3777E5;
			font-weight: bold;
			text-align: center;
			line-height: 140rpx;
		}
	}

	.writebox_inp {
		margin-top: 100rpx;
		font-size: 30rpx;
		padding: 10rpx;
		border-bottom: 1rpx dashed #999999;
		margin: 100rpx auto 0;
	}

	.berboxz {
		border: 1rpx solid #999999;
		border-radius: 100%;
		width: 50rpx;
		height: 50rpx;
	}
	.writebox_czuo{
		margin-top: 144rpx;
		.writebox_czuo_item{
			width: 182rpx;
			height: 66rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			line-height: 66rpx;
			font-size: 24rpx;
		}
	}
	.writebox_inp_check{
		width: 118rpx;
		height: 118rpx;
		margin: 50rpx auto 0;
		border-radius: 100%;
		background-color: #4599FB;
	}
	.writebox_inp_close{
		width: 118rpx;
		height: 118rpx;
		margin: 50rpx auto 0;
		border-radius: 100%;
		background-color: #FE6C1A;
	}
</style>
